<!DOCTYPE html>
<html>

	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
		<meta name="renderer" content="webkit" />
		<script src="jquery-3.5.1.min.js"></script>

		<script type="text/javascript">
			let video, canvas, context, capture, paperId, token

			function init() {
				video = document.getElementsByTagName("video")[0]
				canvas = document.getElementsByTagName("canvas")[0]
				context = canvas.getContext('2d')

				if (navigator.mediaDevices === undefined) {
					navigator.mediaDevices = {}
				}

				if (navigator.mediaDevices.getUserMedia === undefined) {
					navigator.mediaDevices.getUserMedia = function(constraints) {
						let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia
						if (!getUserMedia) {
							return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
						}
						return new Promise(function(resolve, reject) {
							getUserMedia.call(navigator, constraints, resolve, reject)
						})
					}
				}
				let constraints = {
					video: true
				}
				navigator.mediaDevices.getUserMedia(constraints)
					.then(function(stream) {
						if ('srcObject' in video) {
							video.srcObject = stream
						} else {
							video.src = window.URL.createObjectURL(stream)
						}
						video.onloadedmetadata = function(e) {
							capture = self.setInterval(takePhone, 60 * 1000);
							video.play()
						}
					})
					// eslint-disable-next-line handle-callback-err
					.catch(function(err) {
						alert('摄像头打开失败， 请检查权限问题')
					})
			}


			function takePhone() {
				context.drawImage(video, 0, 0, 144, 192)
				let imageBase64 = canvas.toDataURL('image/png').substring(22)
				$.ajax({
					url: "https://www.mindskip.net:6006/api/exam/paper/answer/camera/h5",
					type: "POST",
					contentType: 'application/json',
					headers: {
						'token': token
					},
					data: JSON.stringify({
						paperId: parseInt(paperId),
						imageBase64: imageBase64
					}),
					success: function(data) {

					},
					error: function() {

					},
					dataType: "json"
				});
			}


			window.onload = () => {
				paperId = getQueryString('paperId')
				token = getQueryString('token')
				init()
			}

			window.onunload = () => {
				if (capture) {
					window.clearInterval(capture)
				}
			}


			function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return decodeURIComponent(r[2]);
				return null;
			}
		</script>


		<style>
			.h5-paper-camera {
				width: 72px !important;
				z-index: 99;
			}
		</style>

	<body style="width: 72px;height: 96px;margin: 0px;">
		<canvas class="h5-paper-canvas" width="144" height="192" style="display: none"></canvas>
		<video autoplay="autoplay" class="h5-paper-camera"></video>
	</body>

</html>
